<template>
	<view class="container" :style="{ paddingTop: heig + 'px' }">
		<view class="userAvar">
			<view class="topHeacd"></view>
			<view class="biaoti f f-a-c p-l-30">
				<image src="/static/zuo.png" @click="navback" class="zuoImg" mode=""></image>
			</view>
		</view>
		<view class="">
			<navBar name=" " img="/static/topBg.png" :bgShow="true" :back="false" :bgheiht="900"></navBar>
		</view>
		<view class="body">
			<view class="topDetils">
				<view class="dai">
					{{obj.status==0? '已取消':obj.status==1? '待付款':obj.status==2? '待发货':obj.status==3? '待收货':obj.status==4? '待评价':obj.status==5? '已完成':obj.status==6?'待服务':'待上门'}}
				</view>
				<view class="count">
					{{obj.status==0? '订单已取消，交易关闭':obj.status==1? '订单已提交，请您尽快完成付款':obj.status==2? '订单已支付，我们将尽快为您发出商品':obj.status==3? '商品正马不停蹄的赶来，请您耐心等待':obj.status==4? '收货成功，给我们个评价吧~':obj.status==5? '交易完成，感谢您的惠顾':obj.status==6?'订单已支付，正在确认订单中':'我们正马不停蹄的赶来，请您耐心等待'}}
				</view>
			</view>
			<!--  -->
			<view class="borx p-30 b-f b-r-20">
				<view class="  f f-a-c">
					<view class="lefSta">
						<image src="/static/my/icon_02@2x.png" class="address" mode=""></image>
					</view>
					<view class="rigTop">
						<view class="name">
							{{obj.address.name}} <text>{{obj.address.mobile}}</text>
						</view>
						<view class="addre">
							{{obj.address.province}}{{obj.address.city}}{{obj.address.district}}{{obj.address.detail}}
						</view>
					</view>
				</view>
				<view v-if="obj.status==3" class="xian">

				</view>
				<view v-if="obj.status==3&&obj.logistics.length!=0" @click="shows=true" class="f f-a-c f-j-b">
					<view class="lefSta">
						<image src="/static/cat.png" class="address" mode=""></image>
					</view>
					<view class="cens">
						<view class="cenTop o-f-1">
							{{obj.logistics[0].content}}
						</view>
						<view class="time">
							{{$u.timeFormat(obj.logistics[0].time, 'yyyy-mm-dd')}}
						</view>
					</view>
					<image src="/static/youjian.png" class="youjianImg" mode=""></image>
				</view>
			</view>
			<view class="" v-if="obj.type==2||obj.type==3">
				<view v-if="obj.status==6||obj.status==7||obj.status==1||obj.status==4||obj.status==5"
					class="borx p-30 b-f b-r-20 f f-a-c">
					<image style="width: 48rpx;height: 48rpx;margin-right: 26rpx;" src="/static/shijain.png" mode="">
					</image>
					<view class="timesahng">
						{{obj.type==3?'上门时间':'预约时间'}} {{ $u.timeFormat(obj.scheduled_at, 'yyyy-mm-dd hh:MM:ss')||'--'}}
					</view>
				</view>

			</view>
			<!-- 内容 -->
			<view class="borx p-30 b-f b-r-20">
				<view v-for="(ite,ind) in obj.products" :key="ind" class="order f f-a-c">
					<view class="left">
						<image :src="ite.image" @click="previewImg(ite.image)" class="xiao" mode="scaleToFill"></image>
					</view>
					<view class="rig">
						<view class="rigName">
							{{ite.name}}
						</view>
						<view class="detils">
							{{ite.sku_name}}
						</view>
						<view class="price f f-a-c f-j-b">
							<view class="pic">
								¥{{ite.price}}
							</view>
							<view class="num f f-a-c">
								x{{ite.num}}
								<view @click="goComer(ite.product_id)" v-if="obj.status==4" class="pay">去评价</view>
								<view @click="chaKan(ite.product_id)" v-if="obj.status==5" class="quXiaos">查看评价</view>
							</view>
						</view>
					</view>
				</view>
				<view class="xian">

				</view>
				<view class="Total f f-a-c f-j-b">
					<view class="zong">
						总金额
					</view>
					<view class="pic">
						¥{{obj.total}}
					</view>
				</view>
				<view v-if="obj.discount||obj.deduction" class="Total f f-a-c f-j-b">
					<view class="zong">
						优惠金额
					</view>
					<view class="pic pics">
						¥{{Number(obj.discount)+Number(obj.deduction)}}
					</view>
				</view>
				<view class="Total f f-a-c f-j-b">
					<view class="zong">
						实付金额
					</view>
					<view class="pic">
						¥{{obj.amount}}
					</view>
				</view>
			</view>
			<view class="borx p-30 b-f b-r-20">
				<view class="topsd f f-a-c f-j-b m-b-25">
					<view class="dingdan">订单编号</view>
					<view class="number f f-a-c">
						{{obj.trade_no}}
						<image src="/static/my/copy7.png" @click.stop="copy(obj.trade_no)" class="copy" mode=""></image>
					</view>
				</view>
				<view class="topsd f f-a-c f-j-b">
					<view class="dingdan">下单时间</view>
					<view class="number"> {{$u.timeFormat(obj.create_time, 'yyyy-mm-dd hh:MM:ss')}}</view>
				</view>
			</view>
		</view>
		<view class="bottonBtn f f-a-c f-j-f-e">
			<view v-if="obj.status==1||obj.status==2" @click="certilQu" class="quXiao">取消订单</view>
			<view v-if="obj.status==4||obj.status==5" @click="oneOrder" class="quXiao">再来一单</view>
			<view v-if="obj.status==1" @click.stop="payImmediately(obj.id)" class="pay">立即支付</view>
			<view v-if="obj.status==3||obj.status==6||obj.status==7" @click.stop="comfig" class="pay">
				{{obj.status==3?'确认收货': '确认完成'}}</view>
			<!-- <view @click="goComer" v-if="obj.status==4" class="pay">去评价</view>
			<view @click="chaKan" v-if="obj.status==5" class="quXiaos">查看评价</view> -->
		</view>
		<u-modal title="取消订单" cancel-text="再想想" @confirm="confirmFn" confirm-color="#977961" :show-cancel-button="true"
			v-model="show" :content="content"></u-modal>
		<u-popup v-model="shows" width="85%" height="700" border-radius="25" mode="center">
			<view class="deilsd">
				<uni-steps :options="obj.logistics" active-color="#977961" :active="0" direction="column" />
				<!-- <view v-for="(item,index) in 50" :key="index" class="">
					1111111111111
				</view> -->
			</view>
		</u-popup>
		<u-popup v-model="showss" width="85%" height="300" border-radius="25" mode="center">
			<view class="deilsd">
				<button class="btn" open-type="contact" :plain="true">点击联系客服</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import navBar from '@/components/navBar.vue';
	export default {
		components: {
			navBar
		},
		data() {
			return {
				content: '您确定要取消订单吗，取消后无法恢复',
				show: false,
				shows: false,
				showss: false,
				heig: '',
				id: 0,
				obj: {}
			}
		},
		onShow() {
			this.showss = false
			this.heig = uni.getStorageSync('ht');
		},
		onLoad(options) {
			console.log(options, '555555555');
			this.id = options.id
			this.initObj()
		},
		methods: {
			previewImg(imgurl) {
				uni.previewImage({
					current: imgurl,
					urls: [imgurl]
				});
			},
			// 这个是支付
			async payImmediately(id) {
				let res = await this.$api.payOrder({
					id: id
				})
				if (res.code == 200) {
					wx.requestPayment({
						//成功之后，调用小程序微信支付
						timeStamp: res.data.pay_info.timeStamp,
						nonceStr: res.data.pay_info.nonceStr,
						package: res.data.pay_info.packageValue,
						signType: res.data.pay_info.signType,
						paySign: res.data.pay_info.paySign,
						success: async ress => {
							this.$msg('支付成功！')
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						},
						fail: (flires) => {
							this.$msg('支付失败！')
						}
					})
				} else {
					this.$msg(res.msg)
				}
			},
			// 确认订单
			async comfig() {
				let n = await this.$api.comfigOrder({
					id: this.obj.id
				})
				this.$msg(n.msg)
				if (n.code == 200) {
					setTimeout(() => {
						uni.navigateBack()
					}, 800)
				}
			},
			// /再来一单
			oneOrder() {
				uni.switchTab({
					url: '/pages/shoop/index'
				})
			},
			// /点击取消订单
			certilQu() {
				this.show = true
			},
			// 点击确认取消
			async confirmFn() {
				let n = await this.$api.cancelOrder({
					id: this.obj.id
				})
				this.$msg(n.msg)
				if (n.code == 2001) {
					setTimeout(() => {
						this.show = false
						this.showss = true
					}, 800)
				} else if (n.code == 200) {
					setTimeout(() => {
						this.show = false
						uni.navigateBack()
					}, 800)
				}
			},
			copy(item) {
				uni.setClipboardData({
					data: item, //	这里是个坑接受字符串类型 value转化为字符串
					success: () => {
						//调用方法成功
						this.$msg('复制成功')
						console.log('success');
					}
				})
			},
			async initObj() {
				let n = await this.$api.orderDetils({
					id: this.id
				})
				n.data.logistics.forEach(item => {
					item.time = item.desc
					item.title = item.content
				})
				this.obj = n.data
			},
			// 查看评价
			chaKan(id) {
				uni.navigateTo({
					url: `/pageB/MyAssessments?id=${id}&orderId=` + this.obj.id
				})
			},

			// 去评价
			goComer(id) {
				uni.navigateTo({
					url: `/pageB/GoComment?orderId=${this.obj.id}&id=` + id
				})
			},
			navback() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .uni-steps__column-text {
		padding: 16rpx 0 !important;
	}

	.deilsd {
		position: relative;
		padding: 20rpx;
		height: 100%;
		// background-color: pink;
		// overflow-y: auto;

		.btn {
			position: absolute;
			border: none;
			background-color: #977961;
			text-align: center;
			color: #fff;
			width: 90%;
			left: 50%;
			font-weight: 600;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	}

	.cens {
		width: 80%;

		.cenTop {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-500;
			font-weight: 500;
			text-align: LEFT;
			color: #977961;
		}

		.time {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-400;
			font-weight: 400;
			text-align: LEFT;
			color: #ada6a0;
			margin-top: 8rpx;
		}

	}

	.youjianImg {
		width: 18rpx;
		height: 25rpx;
	}

	.body {
		height: calc(100vh - 150px);
		overflow-y: auto;
		padding-bottom: 20rpx;
	}

	.bottonBtn {
		position: fixed;
		width: 100%;
		height: 150rpx;
		padding: 0 30rpx;
		background: #fffefc;
		bottom: 0;
		left: 0;

		.quXiao {
			width: 176rpx;
			height: 72rpx;
			line-height: 70rpx;
			border: 1rpx solid #cbc2bb;
			border-radius: 37rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-500;
			font-weight: 500;
			text-align: center;
			color: #2f2319;
		}

		.quXiaos {
			width: 176rpx;
			height: 72rpx;
			line-height: 70rpx;
			border: 1rpx solid #cbc2bb;
			border-radius: 37rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-500;
			font-weight: 500;
			text-align: center;
			color: #2f2319;
			margin-left: 25rpx;
		}

		.pay {
			width: 176rpx;
			height: 72rpx;
			line-height: 70rpx;
			background: #977961;
			border-radius: 36rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-500;
			font-weight: 500;
			text-align: center;
			color: #fffefc;
			margin-left: 25rpx;
		}
	}

	.quXiaos {
		width: 140rpx;
		height: 60rpx;
		line-height: 60rpx;
		border: 1rpx solid #cbc2bb;
		border-radius: 37rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-500;
		font-weight: 500;
		text-align: center;
		color: #2f2319;
		margin-left: 25rpx;
	}

	.pay {
		width: 140rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 36rpx;
		font-size: 28rpx;
		border: 1rpx solid #cbc2bb;
		font-family: PingFang SC, PingFang SC-500;
		font-weight: 500;
		text-align: center;
		color: #2f2319;
		margin-left: 25rpx;
	}

	.container {
		height: 100vh;
		width: 100%;

	}

	.topsd {
		.dingdan {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-400;
			font-weight: 400;
			text-align: LEFT;
			color: #6a5f55;
		}

		.number {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-400;
			font-weight: 400;
			text-align: LEFT;
			color: #2f2319;

			.copy {
				width: 32rpx;
				height: 32rpx;
				margin-left: 15rpx;
			}
		}
	}

	.xian {
		height: 2rpx;
		width: 100%;
		background-color: #f1eeeb;
		margin: 15rpx 0;
	}

	.Total {
		.pic {
			font-size: 28rpx;
			font-family: 'HarmonyOS Sans Medium';
			font-weight: 500;
			text-align: LEFT;
			color: #2f2319;
		}

		.pics {
			color: $brown;
			margin: 20rpx 0;
		}

		.zong {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-400;
			font-weight: 600;
			text-align: LEFT;
			color: #2f2319;
		}
	}

	.order {
		margin-bottom: 30rpx;

		.rig {
			width: 70%;

			.price {
				width: 100%;

				.pic {
					font-size: 28rpx;
					font-family: 'HarmonyOS Sans Medium';
					font-weight: 400;
					text-align: LEFT;
					color: $hei;
				}

				.num {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-400;
					font-weight: 400;
					text-align: LEFT;
					color: $hui;
				}
			}

			.detils {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				text-align: LEFT;
				color: $hui;
				margin: 15rpx 0;
			}

			.rigName {
				width: 100%;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 600;
				text-align: LEFT;
				color: $hei;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.left {
			height: 160rpx;
			border-radius: 8rpx;
			width: 35%;
			margin-right: 20rpx;

			.xiao {
				width: 160rpx;
				height: 160rpx;
				object-fit: cover;
			}
		}
	}

	.borx {
		width: 90%;
		margin: 0 auto;
		margin-bottom: 25rpx;

		.rigTop {
			width: 80%;

			.addre {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				text-align: LEFT;
				margin-top: 10rpx;
				color: #6a5f55;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.name {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-500;
				font-weight: 600;
				text-align: LEFT;
				color: #2f2319;

				text {
					margin-left: 10rpx;
				}
			}
		}

		.lefSta {
			width: 48rpx;
			height: 48rpx;
			margin-right: 30rpx;

			.address {
				width: 100%;
				height: 100%;
			}
		}
	}

	.userAvar {
		position: fixed;
		top: 0%;
		left: 0;
		height: 180rpx;
		width: 100%;
		z-index: 99;
	}

	.zuoImg {
		width: 28rpx;
		height: 28rpx;

	}

	.biaoti {
		height: 90rpx;
		width: 100%;
		// background-color: pink;

		.avar {
			width: 56rpx;
			height: 56rpx;
			border-radius: 50%;
		}

		.name {
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #333333;
		}
	}

	.topHeacd {
		height: 70rpx;
	}

	.topDetils {
		padding: 30rpx;

		.dai {
			font-size: 40rpx;
			font-family: PingFang SC, PingFang SC-600;
			font-weight: 600;
			text-align: LEFT;
			color: $hei;
		}

		.count {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-400;
			font-weight: 400;
			color: #6a5f55;
			margin-top: 10rpx;
		}
	}

	.timesahng {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-500;
		font-weight: 600;
		text-align: LEFT;
		color: #2f2319;
	}
</style>